<template>
  <div class="specialty" ref="homePage">
    <div class="bj">
      <van-nav-bar :title="datalist.CategoryName+'详情'" style="background: #68c5ba;width: 100%;">
        <van-icon name="arrow-left" slot="left" color="#FFFFFF" @click="returnto" />
      </van-nav-bar>
    </div>
    <div style="width: 100%;height: 46px;"></div>
    <div class="swipe">
      <van-swipe :autoplay="3000">
        <van-swipe-item class="swipe_img" v-for="(img,index) in images" :key="index">
          <img style="width: 100%;height: 100%;" :src="img.ImgSrc" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="specialty-specialty">
      <div class="specialty-box">
        <!-- <div class="detail-sprice">
            <div style="font-size: 24px;color: #68c5bb;">¥<span>{{Listdata[0].Price}}</span></div>&#8194;

          </div> -->
        <div class="detail-theme">
          <span>{{datalist.Name}} </span>
          <span class="pcs">{{Price}}元</span>
        </div>
        <div class="detail-volume">
          <div>销量：<span>{{datalist.SaleNum}}</span></div>
          <span>原产地：{{datalist.City}}</span>
        </div>
      </div>
    </div>
    <div class="specialty-img" style="width: 100%;margin-top: 0.625rem;">
      <div class="img" v-html="datalist.Content"></div>
    </div>
    <div style="height: 5rem;width: 100%;"></div>
    <div class="buy">
      <van-button round type="danger" color="#46d0ca" style="width: 180px;" @click="details">立即购买</van-button>
    </div>
    <van-popup v-model="show" position="bottom" :style="{ height: '28%' }">
      <div style="padding: 10px;display: flex;align-items: center;font-size: 14px;color: rgb(40, 40, 40);">
        <i class="van-icon van-icon-like-o"></i>
        <span style="margin-left: 5px;">选择商品类型</span>
      </div>
      <div style="padding: 5px 10px;display: flex;flex-direction: column;color: #858585;font-size: 13px;" v-for="(data,index) in Listdata">
        <div style="display: flex;justify-content: space-between;border-bottom: 1px solid #EEEEEE;">
          <div style="font-size: 14px;color: #858585;display: flex;align-items: center;">{{data.Name}}</div>
          <div style="display: flex;flex-direction: column;">
            <s style="text-align: center;">{{data.OriginalPrice}}</s>
            <span style="margin: 5px 0;text-align: center;">最低<span style="font-size: 21px;font-weight: 600;">{{data.Price}}</span>起</span>
          </div>
        </div>
        <div @click="tzxq(data.gSN)" class="goBuyBtn">购买</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  resourceDetails,
  goodsList
} from '@/api/home.js'
export default {
  data () {
    return {
      clintHeigth: '', //获取页面高度
      images: [

      ],
      show: false,
      datalist: {},
      Listdata: [],
      Price: 0
    }
  },
  // beforeRouteLeave(to, from, next) {
  //   // 设置下一个路由的 meta
  //   to.meta.keepAlive = false; // C 跳转到 A 时让 A 不缓存，即刷新
  //   next();
  // },
  mounted () {
    this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
    // console.log(this.clientHeight);
    // let dd = 100;
    this.$refs.homePage.style.height = this.clientHeight + 'px';
    this.detailsdata()
    this.goodsList()
  },
  methods: {
    returnto () {
      this.$router.go(-1);//返回特产详情
    },
    details () {
      this.show = true

    },
    tzxq (gSN) {
      let resSN = this.$route.query.resSN
      this.$router.push({
        path: "/scenic/Specialorder",
        query: {
          resSN: resSN,
          gSN: gSN,
        }
      })
    },
    goodsList () {
      let data = {
        resSN: this.$route.query.resSN,//识别参数
      }
      goodsList(data).then(res => {
        console.log(res)
        this.Listdata = res.List
        this.Listdata.forEach((v) => {
          this.Price += v.Price
          console.log(this.Price)
        })
      })
    },
    detailsdata () {
      // let id =
      let data = {
        resSN: this.$route.query.resSN,//识别参数
      }
      resourceDetails(data).then(res => {
        console.log(res)
        this.datalist = res.Item
        this.images = res.Item.FocusImgs
      })
    },
  }
}
</script>

<style lang="scss" >
.specialty {
  width: 100%;
  height: 100%;
  position: relative;
  background: #ffffff;
  .bj {
    .van-icon {
      color: white !important;
    }
  }
  .swipe {
    width: 100%;
    height: 210px;
    .van-swipe {
      width: 100%;
      height: 100%;
      .van-swipe__track {
        .van-swipe_img img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .specialty-specialty {
    width: 100%;
    height: 8.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f7f7;
    margin-bottom: 10px 0px;
    .specialty-box {
      width: 90%;
      height: 90%;
      .detail-sprice {
        display: flex;
        height: 1.875rem;
        align-items: center;
      }
      .detail-theme {
        height: 40px;
        display: flex;
        font-size: 16px;
        align-items: center;
        color: #000000;
        justify-content: space-between;
      }
      .detail-volume {
        display: flex;
        justify-content: space-between;
        height: 2.5rem;
        align-items: center;
        font-size: 14px;
        color: #b7b7b7;
      }
    }
  }
  .specialty-img {
    .img {
      padding: 10px 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .buy {
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 5rem;
    background: #f7f7f7;
    justify-content: center;
    align-items: center;
  }
  .goBuyBtn {
    width: 150px;
    height: 40px;
    border-radius: 40px;
    color: white;
    background: #46d0ca;
    line-height: 40px;
    text-align: center;
    font-size: 15px;
    margin: 5px auto;
  }
}
</style>
